<!-- Top Nav bar -->
<div class="navbar" role="navigation" ng-controller="sdHeaderCtrl">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand"  href="#"><img src="images/navbar-brand.png" /></a>
        </div>


        <div class="navbar-collapse collapse">
            <div class="navbar-right">
                <ul class="nav navbar-nav">
                    <li ng-show="stateCard.userId == -1"><a data-toggle="modal" data-target="#registerModal">Register</a></li>
                    <li ng-show="stateCard.userId == -1"><a data-toggle="modal" data-target="#loginModal">Login</a></li>
                    <li ng-show="stateCard.userId > -1"><a href="#home">My Profile</a></li>
                    <li ng-show="stateCard.userId > -1"><a ng-click="attemptLogout()">Logout</a></li>                    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-list glyphicon-white"></i>
                            Categories                            
                        </a>
                        <ul class="dropdown-menu">
                            <li ng-repeat="menuItem in menuList">
                                <a ng-href="http://simplydecide.com/category/{{menuItem.results.name}}/{{menuItem.results.id}}">
                                    {{menuItem.results.name}}&nbsp;({{menuItem.results.count}})
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>



    </div>
</div>
<!-- Top Nav bar Ends -->

<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true" ng-controller="sdHeaderCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">
                    Login to SimplyDecide
                    <sup>
                        ™
                    </sup>
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                       <span class="error" ng-if="error.login">{{error.login}}</span>
                        <div class="form-group clear">
                            <div class="input-group col-md-12">
                                <input type="text" ng-model="credentials.username" class="form-control" placeholder="Username">
                                <span class="error" ng-if="error.username">{{error.username}}</span>
                            </div>
                        </div>
                        <div class="form-group clear">
                            <div class="input-group col-md-12">
                                <input type="password" class="form-control" ng-model="credentials.password" placeholder="Passeord">
                                <span class="error" ng-if="error.password">{{error.password}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 text-right">
                       <!-- <a href="#" class="btn col-md-12 btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with facebook</a>-->
					   <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
						</fb:login-button>

						<div id="status">
						</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="reset()" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="attemptLogin()">Login</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true" ng-controller="sdHeaderCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">
                    Register to SimplyDecide
                    <sup>
                        ™
                    </sup>
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                   <div class="form-group clear">
                        <div class="input-group input-group-sm col-md-6" ng-init="registration.firstName=''">
                            <input type="text" ng-model="registration.firstName" ng-class="{error:error.firstName}" class="form-control" placeholder="First Name"><span class="error" ng-if="error.firstName">{{error.firstName}}</span>
                        </div>
                        <div class="input-group input-group-sm col-md-6" ng-init="registration.lastName=''">
                            <input type="text" ng-model="registration.lastName" ng-class="{error:error.lastName}" class="form-control" placeholder="Last Name"><span class="error" ng-if="error.lastName">{{error.lastName}}</span>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="input-group input-group-sm col-md-12" ng-init="registration.email=''">
                            <input type="text" ng-model="registration.email" ng-class="{error:error.email}" class="form-control" placeholder="email Id"><span class="error" ng-if="error.email">{{error.email}}</span>
                        </div>
                    </div>
                    <div class="form-group clear">
                        <div class="input-group input-group-sm col-md-6" ng-init="registration.password=''">
                            <input type="password" ng-model="registration.password" ng-class="{error:error.password}" class="form-control" placeholder="Password"><span class="error" ng-if="error.password">{{error.password}}</span>
                        </div>
                        <div class="input-group input-group-sm col-md-6" ng-init="registration.passwordRepeat=''">
                            <input type="password" class="form-control" ng-class="{error:error.passwordRepeat}" ng-model="registration.passwordRepeat" placeholder="Confirm Password">
                            <span class="error" ng-if="error.passwordRepeat">{{error.passwordRepeat}}</span>
                        </div>
                    </div>
                </div>

                <div class="checkbox" ng-class="{error:error.confirm_age}">
                    <label>
                        <input type="checkbox" ng-model="confirm.age">
                        I confirm I am 18 years of age or older
                    </label>
                    <span class="error" ng-if="error.confirm_age">{{error.confirm_age}}</span>
                </div>
                
                <div class="checkbox" ng-class="{error:error.confirm_terms}">
                    <label>
                        <input type="checkbox" value="" ng-model="confirm.terms">
                        I have read and agree to the <a href="#" target="_blank">Terms &amp; Conditions</a>
                    </label>
                    <span class="error" ng-if="error.confirm_terms">{{error.confirm_terms}}</span>
                </div>
                

                <!--</form>-->

            </div>
            <div class="modal-footer">
				<span class="error" ng-if="error.signup">{{error.signup}}</span>
                <button type="button" class="btn btn-default" ng-click="reset()" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="attemptSignup()">Register</button>
            </div>
        </div>
    </div>
</div>